<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Axis Rescaling</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>

<script type="text/javascript">
    var height = 500, 
        width = 500, 
        margin = 25,
        xAxis, yAxis, xAxisLength, yAxisLength;
    
    var svg = d3.select("body").append("svg")     
            .attr("class", "axis")    
            .attr("width", width)
            .attr("height", height);
    
    function renderXAxis(){
        xAxisLength = width - 2 * margin;
    
        var scale = d3.scaleLinear()
                        .domain([0, 100])
                        .range([0, xAxisLength]);
        
        xAxis = d3.axisBottom()
                .scale(scale);
                
        svg.append("g")       
            .attr("class", "x-axis")
            .attr("transform", function(){ 
                return "translate(" + margin + "," + (height - margin) + ")";
            })
            .call(xAxis);
    }
    
    function renderYAxis(){        
        yAxisLength = height - 2 * margin;
    
        var scale = d3.scaleLinear()
                        .domain([100, 0])
                        .range([0, yAxisLength]);
    
        yAxis = d3.axisLeft()
                .scale(scale);

        svg.append("g")       
            .attr("class", "y-axis")
            .attr("transform", function(){
                return "translate(" + margin + "," + margin + ")";
            })
            .call(yAxis);
    }   
            
    function rescale(){ // <-A
        var max = Math.round(Math.random() * 100);
        
        xAxis.scale().domain([0, max]); // <-B
        svg.select("g.x-axis")
            .transition()
            .call(xAxis); // <-C
            
        yAxis.scale().domain([max, 0]);
        svg.select("g.y-axis")
            .transition()
            .call(yAxis);
        
        renderXGridlines();
        renderYGridlines();
    }       
    
    function renderXGridlines(){
        d3.selectAll("g.x-axis g.tick")
                .select("line.grid-line")
                .remove(); // <-D
                
        d3.selectAll("g.x-axis g.tick")
                .append("line")
                    .classed("grid-line", true)
                    .attr("x1", 0)
                    .attr("y1", 0)
                    .attr("x2", 0)
                    .attr("y2", - yAxisLength);
    }
    
    function renderYGridlines(){
        d3.selectAll("g.y-axis g.tick")
                .select("line.grid-line").remove();
        
        d3.selectAll("g.y-axis g.tick")
                .append("line") 
                    .classed("grid-line", true)
                    .attr("x1", 0)
                    .attr("y1", 0)
                    .attr("x2", xAxisLength)
                    .attr("y2", 0);
    }
    
    renderYAxis();
    renderXAxis();
    renderXGridlines();
    renderYGridlines();
</script>

<div class="control-group">
    <button onclick="rescale()">ReScale</button>
</div>

</body>

</html>